<template>
  <div class="login">
    <h1>{{ formType === 'login' ? '登录' : '注册' }}</h1>
    <input v-model="username" placeholder="用户名/邮箱" />
    <input v-model="password" placeholder="密码" type="password" />
    <input v-if="formType === 'register'" v-model="confirmPassword" placeholder="确认密码" type="password" />
    
    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
    <p v-if="successMessage" class="success-message">{{ successMessage }}</p>
    
    <div class="button-group">
      <el-button 
        :type="formType === 'login' ? 'success' : 'primary'" 
        @click="handleFormSubmit"
      >
        {{ formType === 'login' ? '登录' : '注册' }}
      </el-button>
      <el-button 
        type="text" 
        @click="toggleForm"
      >
        {{ formType === 'login' ? '去注册' : '去登录' }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useUserStore } from '../stores/user';
import { useRouter } from 'vue-router';

const username = ref('');
const password = ref('');
const confirmPassword = ref('');
const formType = ref('login'); // 'login' 或 'register'
const errorMessage = ref('');
const successMessage = ref('');
const userStore = useUserStore();
const router = useRouter();

// 表单验证
const validateForm = () => {
  errorMessage.value = '';
  
  if (!username.value || !password.value) {
    errorMessage.value = '用户名和密码不能为空';
    return false;
  }
  
  if (formType.value === 'register') {
    if (password.value !== confirmPassword.value) {
      errorMessage.value = '两次输入的密码不一致';
      return false;
    }
    
    // 简单的邮箱格式验证
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(username.value)) {
      errorMessage.value = '请输入有效的邮箱地址';
      return false;
    }
  }
  
  return true;
};

// 处理表单提交
const handleFormSubmit = () => {
  if (!validateForm()) return;
  
  if (formType.value === 'login') {
    // 登录逻辑
    const newUser = { name: username.value, email: username.value };
    userStore.setUser(newUser);
    router.push('/todolist');
  } else {
    // 注册逻辑
    // 这里只是模拟注册成功，实际应用中需要与后端交互
    successMessage.value = '注册成功！已自动填充账号密码，请登录';
    errorMessage.value = '';
    
    // 2秒后自动切换到登录表单
    setTimeout(() => {
      toggleForm();
      successMessage.value = '';
    }, 2000);
  }
};

// 切换表单类型
const toggleForm = () => {
  // 切换前保存已输入的信息
  if (formType.value === 'register') {
    // 注册切登录时，保留用户名和密码
    successMessage.value = '';
  } else {
    // 登录切注册时，清空确认密码
    confirmPassword.value = '';
  }
  
  formType.value = formType.value === 'login' ? 'register' : 'login';
};
</script>

<style scoped>
.login {
  padding: 20px;
  text-align: center;
}

input {
  margin: 10px;
  padding: 10px;
  width: 200px;
}

button {
  padding: 10px 20px;
  background-color: #28a745;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

.error-message {
  color: red;
  margin: 5px 0;
}

.success-message {
  color: green;
  margin: 5px 0;
}

.button-group {
  margin-top: 20px;
}

.main-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}
</style>